<template>
  <div>
    <el-table
    :data="tableData1"
    style="width: 100%"
    row-key="id"
    border
    lazy
    :load="load"
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column

            label="属性值名称"
            width="width"
          >
            <template slot-scope="{row,$index}">
              <el-input v-if="row.flag" :ref="$index" v-model="row.name" placeholder="请输入属性名称" size="mini" @blur="toLook(row)" @keyup.native.enter="row.flag=false" />
              <span v-else style="display:block" @click="toEdit(row,$index)">{{ row.name }}</span>
            </template>
          </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
      <template slot-scope="{row,$index}">
        <el-button
          size="mini"
          @click="handleEdit(row,$index)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tableData1: [{
        id: 1,
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        id: 2,
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        id: 3,
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1519 弄',
        hasChildren: true
      }, {
        id: 4,
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1516 弄'
      }]
    }
  },
  methods: {
    load (tree, treeNode, resolve) {
      setTimeout(() => {
        resolve([
          {
            id: 31,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            id: 32,
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
          }
        ])
      }, 1000)
    },

    handleEdit (row, index) {
      // console.log(index, row)

      this.$set(row, 'flag', true)
      console.log(row, index)

      // row.flag = false
    },
    handleDelete (index, row) {
      console.log(index, row)
    },
    toLook (row) {
      // console.log(row)
      if (row.name.trim() == '') {
        this.$message('请你输入一个属性值')
        return
      }
      // 过滤属性不为空的
      // if (item.valueName !== '') {
      //     // 删除flag
      //     delete item.flag
      //     return true
      // }
      // // 新增的属性不能与已有的重复
      // const repet = this.attrInfo.attrValueList.some(item => {
      //   // 将row从数组里面判断去除
      //   if (row !== item) {
      //     return row.valueName == item.valueName
      //   }
      // })
      // if (repet) {
      //   this.$message('请请不要重复输入')
      //   return
      // }
      // console.log(repet)
      row.flag = false
    },
    // 点击span进入编辑模式
    toEdit (row, index) {
      console.log(row)
      if (row.flag) {
        row.flag = true
      }

      // 获取节点实现自动聚焦
      // console.log(this.$refs[index])
      // 点击切换时 页面重排 input 所以不能立刻获取
      // 当节点渲染完毕会执行$newxTickt
      this.$nextTick(() => {
        console.log(this.$refs[index])
        // 获取响应的表单实现聚焦
        // this.$refs[index].focus()
      })
    }
  }

}
</script>

<style>

</style>